<template>
  <view class="wrap" v-if="showPage">
    <!-- #ifdef WEB -->
    <uv-navbar title="问答详情" safeAreaInsetTop placeholder left-icon=""></uv-navbar>
    <view class="appNav">
      <view class="left">
        <view class="logo"><image src="../../../static/logo.png" class="img"></image></view>
        <view class="name">投研宝</view>
      </view>
      <button hover-class="none" class="btn" @click="goApp">去app查看</button>
    </view>
    <uv-line color="#EFEFEF"></uv-line>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <uv-navbar title="问答详情" leftText="" placeholder safeAreaInsetTop autoBack></uv-navbar>
    <!-- #endif -->
    <template v-if="detail.deletetime">
      <view style="text-align: center;padding-top: 250px;">抱歉，此问答已删除</view>
    </template>
    <template v-if="!detail.deletetime">
      <view class="hd" v-if="detail">
        <answerDetail :detail='detail' :order='false' @followClick='getData'></answerDetail>
      </view>
      <!-- 未加入社群，显示这个模块 -->
      <template v-if="detail.is_join == 0">
        <view class="webLook">
          <view class="content">部分内容已隐藏，加入可查看更多内容</view>
        </view>
        <view class="foot" v-if="detail.answer">
          <view class="item">
            <view class="icon">
              <image src="../../../static/tip1.png" class="img"></image>
            </view>
            <view class="number">{{ detail.answer.collect_num }}</view>
          </view>
          <view class="item">
            <view class="icon">
              <image src="../../../static/tip2.png" class="img"></image>
            </view>
            <view class="number">{{ detail.answer.comment_num }}</view>
          </view>
          <view class="item">
            <view class="icon">
              <image src="../../../static/tip3.png" class="img"></image>
            </view>
            <view class="number">{{ detail.answer.like_num }}</view>
          </view>
        </view>
        <view class="webFooter">
          <view class="webhd">
            <view class="logo">
              <image :src="setUrl(detail.association.logo_image)" class="img" v-if="detail.association.logo_image"></image>
              <image src="../../../static/logo.png" class="img" v-else></image>
            </view>
            <view class="name">
              <view class="ming">{{detail.association.name}}</view>
              <view class="desc" v-if="detail.association.user">群主{{ detail.association.user.nickname }}创建 成员 {{ detail.association.member_count }}</view>
            </view>
          </view>
          <scroll-view scroll-y class="content">{{ detail.association.desc }}</scroll-view>
          <button class="btn" hover-class="none" @click="goApp">立即加入</button>
          <uv-safe-bottom></uv-safe-bottom>
        </view>
        <view style="width: 100%;" :style="{height: webHeigth + 'px'}"></view>
      </template>
      <!-- 未加入社群，显示这个模块 END -->
      <!-- 已加入社群，显示这个模块 -->
      <template v-if="detail.is_join == 1">
        <view class="moneyBox">
          <view class="money" @click="openPopup">
            <view>
              <view class="font">
                <view class="icon">
                  <image src="../../../static/reward.png" class="img"></image>
                </view>
                <view class="master">打赏作者</view>
              </view>
              <view class="more" v-if="detail.answer">已有 {{ detail.answer.reward_num }} 人打赏</view>
            </view>
          </view>
        </view>
        <view class="share">
          <uv-divider text="分享至" lineColor='#EFEFEF' textSize='28rpx' textColor='#737373'></uv-divider>
        </view>
        <sharePage url='/pages/group/question/answerDetail' title='我向你分享了一条问题，来看看吧！' type='answer' :detail='detail' :pic="detail.images ? setUrl(detail.images.split(',')[0]) : ''"></sharePage>
        <view class="comment">
          <view class="head">评论 ({{ list.length }})</view>
          <comment :list='list' type='answer' @click="reply" v-if="list.length"></comment>
        </view>
        <template v-if="detail.answer">
          <send type='answer' :detail='detail' :focus='focus' :peoper='peoper' :ladder='ladder' :ids='id' @click="submit"></send>
        </template>
        <view class="safe"></view>
        <uv-safe-bottom></uv-safe-bottom>
      </template>
      
      <uv-popup ref="popup" bgColor='none' @change='popupChange'>
        <view class="popupBox">
          <view class="ava" v-if="detail.answer">
            <avatar :src='setUrl(detail.answer.user.avatar)' styles='width: 160rpx;height: 160rpx'></avatar>
          </view>
          <view class="cell" :style="`background-image: url(${popupMoney})`">
            <view class="name">{{ detail.answer.user.nickname }}</view>
            <view class="moneyBg" v-if="word">随机金额</view>
            <view class="moneyNumber" v-else>
              <!-- <view class="font">￥</view> -->
              <uv-input type='number' placeholder="1~200投研币" v-model="money" maxlength='3' placeholderStyle='font-weight: 500; font-size: 48rpx; color: #B8B8B8;' fontSize='48rpx' color='#000' border='none'></uv-input>
            </view>
            <view class="tab" @click="tapMoney">{{ word ? '其他金额' : '取消' }}</view>
            <view class="foo">
              <button hover-class="none" class="btn" @click='callMoney'>打赏</button>
            </view>
          </view>
        </view>
      </uv-popup>
      
      <uv-modal ref="modal" title="提示">
        <view class="slot-content">
          {{msg}}
        </view>
      </uv-modal>
    </template>
  </view>
</template>

<script setup>
import logoImage from '@/static/logo.png';
import popupMoney from '../../../static/popupMoney.png';
import answerDetail from '../../../components/group/answerDetail.vue';
import sharePage from '../../../components/share/page.vue';
import comment from '../../../components/send/comment.vue';
import { post } from '@/api';
import { ref, computed, getCurrentInstance } from 'vue';
import { useUser, useOrder } from '@/store';
import { setUrl, toast, checkServe } from '@/common';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';

const { ctx } = getCurrentInstance();
const store = useUser();
const userInfo = uni.$uv.deepClone(store.userInfo);
const popup = ref(null);
const onShare = ref(null);
const modal = ref(null);

let id = '';
let webHeigth = ref(0);
let word = ref(true);
let money = ref('')
let detail = ref('');
let focus = ref(false);
let peoper = ref({});
let ladder = ref(0);
let list = ref([]);
let total = 0;
let last_page = 0;
let page = 1;
let limit = 15;
let msg = ref('');
let showPage = ref(false);

onLoad((option) => {
  id = option.id;
  getData('frist');
})
// #ifdef APP-PLUS
// 上拉加载
onReachBottom(() => {
  if(detail.value.is_join == 1 && !detail.value.deletetime){
    if(last_page < page || last_page == page) return;
    page++
    loading();
    getList();
    uni.hideLoading();
  }
})
// #endif

// 获取提问回答详情
function getData(value){
  const params = {
    question_id: id
  }
  // #ifdef H5
  params.is_share = 1;
  // #endif
  post('api/association_question/getQuestionDetail', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      detail.value = data;
      if(data.is_join == 1 && !data.deletetime){
        if(value == 'frist') getList();
        setTimeout(() => {
          setWEBFoot();
        }, 200)
      }
      showPage.value = true;
    }
  })
}
// 获取一级评论列表
function getList(){
  if(!detail.value.answer) return;
  const params = {
    page,
    limit,
    answer_id: detail.value.answer.id
  }
  post('api/association_answer/answerCommentList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      total = data.total;
      list.value = [...list.value, ...data.data];
    }
  })
}
// 提交评论内容
function submit(){
  page = 1;
  list.value = [];
  getList();
  peoper.value = {}; //初始化用户回复行动
  ladder.value = 0;
}
// 打赏
function callMoney(){
  if(!word.value && !money.value) return toast('请输入投研币');
  if(!word.value && (Number(money.value) > 200 || Number(money.value) < 1)) return toast('请输入1~200的投研币');
  if(word.value){
    money.value = uni.$uv.random(1, 200);
  }else{
    if(!uni.$uv.test.digits(money.value)) return toast('只能输入整数');
  }
  popup.value.close();
  const params = {
    answer_id: id,
    coin: Number(money.value)
  }
  uni.setStorageSync('user', detail.value.user);
  uni.navigateTo({
    url: `/pages/group/cashier2?type=answer&params=${JSON.stringify(params)}`
  });
}
function setWEBFoot(){
  ctx.$uv.getRect('.webFooter').then(res=>{
    webHeigth.value = res.height + 50;
  })
}
function reply(row){
  peoper = row.peoper;
  ladder = row.ladder;
  focus.value = true;
}
function tapMoney(){
  money.value = '';
  word.value = !word.value;
}
function openPopup(){
  popup.value.open();
}
function popupChange(e){
  if(!e.show){
    setTimeout(() => {
      word.value = true;
      money.value = '';
    }, 1000)
  }
}
// 跳转app
function goApp(){
  // #ifdef APP-PLUS
  uni.navigateTo({
    url: `/pages/group/not-detail?id=${detail.value.association_id}`
  });
  // #endif
  // #ifdef WEB
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('micromessenger') !== -1) {
    msg = '请点击右上角，在浏览器打开';
    modal.value.open();
  } else {
    let route = `/pages/group/not-detail?id=${body.value.id}`
    location.href = 'touyanbao://' + route
    noApp();
  }
  // #endif
}
// 无响应或者没安装跳转下载
let timer = null;
function noApp() {
	console.log("===========》noApp");
	var t = Date.now(),
		r = 'https://www.xcxwo.com/QfvDcS';
	timer = setTimeout(function() {
    console.log(document.hidden);
    console.log(document.webkitHidden);
		return Date.now() - t > 3200 ? (clearTimeout(timer), !1) : !document.webkitHidden &&!document.hidden &&void(location.href = r);
	}, 3000);
}
</script>

<style lang="scss" scoped>
  .webFooter{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    box-shadow: 0px -4px 7px 0px rgba(0, 0, 0, 0.30);
    padding: 30rpx;
    background-color: #FFFFFF;
    .webhd{
      display: flex;
      align-items: center;
      .logo{
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
      }
      .name{
        padding-left: 20rpx;
        .ming{
          font-size: 32rpx;
          color: #2B2B2B;
        }
        .desc{
          font-size: 26rpx;
          color: #CECECE;
          padding-top: 10rpx;
        }
      }
    }
    .content{
      font-size: 28rpx;
      color: #2B2B2B;
      padding: 30rpx 0;
      height: 280rpx;
    }
  }
  .foot{
    width: 100%;
    padding-top: 100rpx;
    display: flex;
    align-items: center;
    .item{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .number{
        font-weight: 400;
        font-size: 24rpx;
        color: #737373;
        padding-left: 8rpx;
      }
      .icon{
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .appNav{
    padding: 0 30rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      .logo{
        width: 60rpx;
        height: 60rpx;
        font-size: 0;
        border-radius: 10rpx;
        overflow: hidden;
      }
      .name{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-left: 20rpx;
      }
    }
    .btn{
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
  .webLook{
    padding: 0 30rpx;
    .content{
      background-color: #EFEFEF;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 28rpx;
      color: #2B2B2B;
    }
  }
  .popupBox{
    position: relative;
    padding-top: 80rpx;
    .cell{
      background-repeat: no-repeat;
      background-size: contain;
      width: 560rpx;
      height: 578rpx;
      .foo{
        padding: 0 80rpx;
        padding-top: 50rpx;
      }
      .tab{
        font-weight: 400;
        font-size: 28rpx;
        color: #465B89;
        text-align: center;
        padding-top: 24rpx;
      }
      .moneyNumber{
        width: 480rpx;
        height: 120rpx;
        margin: 0 auto;
        margin-top: 60rpx;
        background-color: #EFEFEF;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        .font{
          font-weight: 500;
          font-size: 48rpx;
          color: #2B2B2B;
          padding-right: 8rpx;
        }
      }
      .moneyBg{
        width: 480rpx;
        height: 120rpx;
        line-height: 120rpx;
        margin: 0 auto;
        margin-top: 60rpx;
        background-color: #EFEFEF;
        border-radius: 16rpx;
        font-weight: 500;
        font-size: 48rpx;
        color: #2B2B2B;
        text-align: center;
      }
      .name{
        text-align: center;
        padding-top: 90rpx;
        font-size: 36rpx;
        color: #2B2B2B;
      }
    }
    .ava{
      width: 160rpx;
      height: 160rpx;
      position: absolute;
      top: 0rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .safe{
    width: 100%;
    height: 208rpx;
    background-color: #fff;
  }
  .comment{
    padding: 30rpx;
    padding-top: 80rpx;
    .head{
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      padding-bottom: 24rpx;
      border-bottom: 1px solid #E6E6E6;
    }
  }
  .share{
    padding: 0 30rpx;
    padding-top: 20px;
  }
  .moneyBox{
    display: flex;
    justify-content: center;
    padding-top: 40rpx;
    .money{
      width: 400rpx;
      height: 140rpx;
      background-image: linear-gradient(90deg, #FF644C 0%, #E43222 100%);
      border-radius: 140rpx;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .more{
        padding-top: 4rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
      }
      .font{
        display: flex;
        align-items: center;
        .icon{
          width: 40rpx;
          height: 40rpx;
        }
        .master{
          font-weight: 500;
          font-size: 36rpx;
          color: #FFFFFF;
          padding-left: 8rpx;
        }
      }
    }
  }
  .hd{
    padding: 0 30rpx;
  }
</style>